import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Menu, Tooltip, Icon, Row, Col, Tabs, Modal, message, Button } from 'antd';
import { RIGHT } from '../../constants';
import StatisticsTask from './StatisticsTask';
import StatisticsChannel from './StatisticsChannel';
import StatisticsTaker from './StatisticsTaker';
import AlimamaOrderList from './AlimamaOrderList';
import AlimamaShopList from './AlimamaShopList';
import styles from './AlimamaOrder.less';
const SubMenu = Menu.SubMenu;

@connect(state => ({
  currentUser: state.user.currentUser,
}))

export default class Statistics extends PureComponent {
  state = {
    currentKey: 'task',
  }
  handleClick = (e) => {
    this.setState({
      currentKey: e.key,
    });
  }
  render() {
    const { currentUser } = this.props;
    const showPubish = currentUser.rights && currentUser.rights.indexOf(RIGHT.daren) >= 0;
    const { currentKey } = this.state;
    let content = currentKey;
    if (currentKey === 'task') {
      content = <StatisticsTask daren_id={currentUser._id}/>
    } else if (currentKey === 'channel') {
      content = <StatisticsChannel daren_id={currentUser._id} />
    } else if (currentKey === 'taker') {
      content = <StatisticsTaker daren_id={currentUser._id} />
    } else if (currentKey === 'shop') {
      content = <AlimamaShopList />
    } else if (currentKey === 'product') {
      content = <AlimamaOrderList />
    }
    return (
      <div>
        <Card bodyStyle={{ paddingBottom: 0 }}>
          <Row gutter={20}>
            <Col span={12}>
              <Menu
                style={{ borderBottom: 'none', display: 'inline-block', verticalAlign: 'top' }}
                onClick={this.handleClick}
                selectedKeys={[this.state.currentKey]}
                mode="horizontal"
              >
                 <Menu.Item key="task">
                  文章
                </Menu.Item>
                <Menu.Item key="channel">
                  渠道
                </Menu.Item>
                <Menu.Item key="taker">
                  小编
                </Menu.Item>
                {showPubish &&
                  <Menu.Item key="shop">
                    店铺
                  </Menu.Item>
                }
                {showPubish &&
                  <Menu.Item key="product">
                    商品
                  </Menu.Item>
                }
              </Menu>
              <div style={{ display: 'inline-block', lineHeight: '46px', verticalAlign: 'top' }}>
                <Tooltip placement="top" title="当前账号发布到阿里创作平台的数据(包括发布和保存到阿里创作平台草稿箱)">
                  <Icon type="question-circle-o" style={{ marginLeft: 5 }} />
                </Tooltip>
              </div>
            </Col>
          </Row>
        </Card>

        <Card style={{ marginTop: 20 }}>
            {content}
        </Card>
      </div>
    );
  }
}
